<template>
	<div class="hovereffect">
		<img class="img-responsive" :src="getUrl()" width="100%" height="100%" alt="">
		<div class="overlay">
			<h2>{{title}}</h2>
			<a @click="jump(clickRouter)" class="info" href="#">点击跳转</a>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			imgsrc: {
				type: String,
				required: true,
				default: "./"
			},
			title: {
				type: String,
				required: true,
				default: "数据大屏"
			},
			clickRouter: {
				type: String,
				required: true,
				default: "index"
			}
		},
		components: {},
		mounted() {},
		methods: {
			jump: function(routerPath) {
				//this.$router.replace(routerPath); // 本页面打开
				// 打开新页面
				let routeData = this.$router.resolve({path: routerPath,query: {}});
				window.open(routeData.href, '_blank');
			},
			getUrl: function() {
				return require(`@/assets/${this.imgsrc}.png`);
			}
		}
	};
</script>

<style lang="scss">
	.hovereffect {
		width: 100%;
		height: 100%;
		float: left;
		overflow: hidden;
		position: relative;
		text-align: center;
		cursor: default;
	}

	.hovereffect .overlay {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		opacity: 0;
		background-color: rgba(0, 0, 0, 0.5);
		-webkit-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out
	}

	.hovereffect img {
		display: block;
		position: relative;
		-webkit-transition: all .4s linear;
		transition: all .4s linear;
	}

	.hovereffect h2 {
		text-transform: uppercase;
		color: #fff;
		text-align: center;
		position: relative;
		font-size: 19px;
		background: rgba(0, 0, 0, 0.3);
		-webkit-transform: translatey(-100px);
		-ms-transform: translatey(-100px);
		transform: translatey(-100px);
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		padding: 80px;
	}

	.hovereffect a.info {
		text-decoration: none;
		display: inline-block;
		text-transform: uppercase;
		color: #fff;
		border: 1px solid #fff;
		background-color: transparent;
		opacity: 0;
		filter: alpha(opacity=0);
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		margin: 50px 0 0;
		padding: 7px 14px;
	}

	.hovereffect a.info:hover {
		box-shadow: 0 0 5px #fff;
	}

	.hovereffect:hover img {
		-ms-transform: scale(0.95);
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
	}

	.hovereffect:hover .overlay {
		opacity: 1;
		filter: alpha(opacity=100);
	}

	.hovereffect:hover h2,
	.hovereffect:hover a.info {
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-transform: translatey(0);
		-webkit-transform: translatey(0);
		transform: translatey(0);
	}

	.hovereffect:hover a.info {
		-webkit-transition-delay: .2s;
		transition-delay: .2s;
	}
</style>
